<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true" ref="ruleFormRef">
        <el-select
          v-model="query.department_id"
          filterable
          placeholder="请选择科室"
          @change="getList"
        >
          <el-option v-for="item in depListDate" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-form-item>
          <br />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div class="util">
        <el-button type="primary" @click="sendHandler" v-if="auth && auth.edit">
          <el-icon>
            <Message />
          </el-icon>
          发送站内信息
        </el-button>
        <el-button type="primary" @click="addHandler" v-if="auth && auth.edit">
          <el-icon>
            <Plus />
          </el-icon>
          新增房间
        </el-button>
        <el-button type="success" @click="router.go(-1)" v-if="route.query.id">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回
        </el-button>
      </div>
      <div class="table-inner">
        <el-table
          class="table"
          v-loading="loading"
          :data="list"
          border
          @selection-change="handleSelectionChange"
        >
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="name" label="房间名称" align="center" />
          <el-table-column prop="number" label="房间编号" align="center" />
          <el-table-column prop="department" label="科室" align="center" />
          <el-table-column prop="status" label="状态" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                inline-prompt
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                :disabled="auth && !auth.modify"
                @change="changeStatus(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="update_time" label="更新时间" align="center" />
          <el-table-column prop="operator" label="操作" width="360px" align="center">
            <template #default="scope">
              <el-button
                type="success"
                size="small"
                icon="User"
                @click="
                  jumpStaff(
                    `/equipment/manage?platform_id=${scope.row.platform_id}&roomId=${scope.row.id}`,
                  )
                "
                v-if="auth && auth.personnel"
              >
                设备列表
              </el-button>
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="editHandler(scope.row)"
                v-if="auth && auth.edit"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                @click="del(scope.row)"
                v-if="auth && auth.delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          v-model:pageSize="query.limit"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <RoomDialog ref="roomDialog"  @refresh="getList" />
    <MsgDialog ref="msgDialog" />
  </div>
</template>

<script lang="ts" setup>
  import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { nextTick, onMounted, reactive, ref } from 'vue'
  import RoomDialog from './components/RoomDialog.vue'
  import MsgDialog from './components/MsgDialog.vue'
  import { roomList, editRoom, deleteRoom, departmentList } from '@/api/admin'
  import { useRoute, useRouter } from 'vue-router'
  import { isArray } from '@/utils/validate'
  const route = useRoute()
  const router = useRouter()
  const loading = ref(true)
  const list = ref()
  const total = ref(0)
  const checkList = ref()
  const roomDialog = ref()
  const msgDialog = ref()
  const depListDate = ref()

  const query = reactive({
    platform_id: route.query.id || '',
    department_id: '',
    op: { department_id: '=', platform_id: '=' },
    page: 1,
    limit: 10,
  })
  const auth = ref()

  const getList = (e) => {
    // if (route.query.deptId) query.department_id = Number(route.query.deptId)
    loading.value = true
    roomList(query).then((res) => {
      if (res.code == 200) {
        auth.value = res.data.auth
        list.value = res.data.data
        total.value = res.data.count
      }
      loading.value = false
    })
  }
  const getdepList = () => {
    // loading.value = true
    departmentList({ platform_id: route.query.id, limit: 1000, page: 1 }).then((res) => {
      if (res.code == 200) {
        depListDate.value = res.data.data
      }
      // loading.value = false
    })
  }

  const addHandler = () => {
    roomDialog.value.show()
  }
  const editHandler = (row) => {
    roomDialog.value.show(row)
  }
  const handleSelectionChange = (val) => {
    checkList.value = val
  }
  const sendHandler = () => {
    if (isArray(checkList.value) && checkList.value.length > 0) {
      let roomID = []
      checkList.value.forEach((item) => {
        roomID.push(item.id)
      })
      msgDialog.value.show(roomID)
    } else {
      ElMessage.warning('请选择要发送的房间！')
    }
  }
  const del = (row) => {
    ElMessageBox.confirm(`你确定要删除科室 “${row.name}” 吗?`, '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }).then(() => {
      deleteRoom({
        id: row.id,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: res.data,
            message: res.msg,
            type: 'success',
          })
          getList()
        }
      })
    })
  }
  const handleSizeChange = (val: number) => {
    query.page = 1
    query.limit = val
    getList()
  }

  const handleCurrentChange = (val: number) => {
    query.page = val
    getList()
  }

  const changeStatus = (row) => {
    ElMessageBox.confirm(
      `确定要${!row.status ? '禁用' : '启用'}房间 “${row.name}” 吗？`,
      '温馨提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        editRoom({
          id: row.id,
          status: row.status,
        }).then((res) => {
          if (res.code == 200) {
            ElNotification({
              title: `${!row.status ? '禁用' : '启用'}成功`,
              message: res.msg,
              type: 'success',
            })
          } else {
            if (row.status == 0) row.status = 1
            else if (row.status == 1) row.status = 0
          }
        })
      })
      .catch(() => {
        if (row.status == 0) row.status = 1
        else if (row.status == 1) row.status = 0
      })
  }

  const jumpStaff = (url) => {
    router.push(url)
  }

  nextTick(() => {
    query.department_id = route.query.deptId?Number(route.query.deptId):''
    getList()
    getdepList()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
